import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal } from 'antd';
import React from 'react';
import styles from '../index.less'
const FormItem = Form.Item;

const CreateForm = props => {
  const { createModalVisible, form, onSubmit: handleAdd, onCancel } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd({...fieldsValue, id: ''});
    });
  };

  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    }
  }

  return (
    <Modal
      width={400}
      className={styles.reasonForm}
      destroyOnClose
      title="新建拒绝原因"
      visible={createModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem {...formLayout} label="拒绝原因">
        {form.getFieldDecorator('content', {
          rules: [
            {
              required: true,
              message: '拒绝原因不能为空'
            },
          ],
        })(<Input.TextArea rows={4} maxLength={50} placeholder="请输入" />)}
      </FormItem>
    </Modal>
  );
};

export default Form.create()(CreateForm);
